<template>
	<view class="indexContent" :class="{popupShow:popupShow}">
		<view class="upper">
			<view class="title">
				<image src="@/static/img/logo.png" class="logo" />
				<image :src="scanImg" class="scan" @click="scan" />
			</view>
			<view class="step">
				<view v-for="(tabs,index) in stepList" :key="tabs.id">
					<view :class="{ active: tabs.id === selectedTabId }" @click="selectTab(tabs.id)">
						{{ tabs.step }}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="centre" v-for="(content, index) in contentsOne" :key="content.id"
			v-show="content.id === selectedTabId"> -->
		<view class="centre">
			<view class="banner">
				<swiper class="swiper-container" :indicator-dots="true" :circular="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item.imgPath" mode="aspectFill" class="swiper-image"></image>
						<text class="swiper-text">{{ item.noticeTitle }}</text>
					</swiper-item>
				</swiper>
				<view class="hot">NEW</view>
			</view>
			<z-paging
				ref="paging"
				autowire-list-name="noticeList" 
				autowire-query-name="listData"
			  >
				<view class="ul" v-show="noticeList.length > 0">
					<view class="li" v-for="(item,index) in noticeList" :key="index" @click="noticeListActive(item.id)">
						<view class="left">
							<!-- <image :src="item.imgPath" alt=""></image> -->
							<image :src="temporaryImgPath" alt=""></image>
						</view>
						<view class="right">
							<view class="h1">{{ item.noticeTitle }}</view>
							<view class="h2">{{ item.createTime }}</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
		<uni-popup ref="scan" type="bottom">
			<view class="scanContent">
				<view class="title">扫一扫</view>
				<view class="box">
					<view class="button">
						<button class="itemIdentification" @click="itemIdentification">物品识别</button>
						<button class="rawMaterialIdentification" @click="rawMaterialIdentification">原料识别</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="rawMaterialIdentification" type="bottom" @change="handleChange">
			<view class="rawMaterialIdentificationContent">
				<view class="title">原料识别</view>
				<view class="box">
					<uni-data-picker
						placeholder="请选择原料"
						popup-title="请选择原料"
						:localdata="classDataTree"
						v-model="classValue"
						@change="onchange"
						@nodeclick="onnodeclick"
					></uni-data-picker>
					<view class="button">
						<button @click="identify">识别</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="identificationMethod" type="bottom">
			<view class="identificationMethodContent">
				<view class="title">识别方式</view>
				<view class="box">
					<view class="button">
						<button @click="selectPicture(selectPictureNumber)">选择图片</button>
						<button @click="cameraPicture(cameraPictureNumber)">拍照</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="selectPicture" type="bottom">
			<view class="selectPictureContent">
				<view class="title">识别结果</view>
				<view class="box">
					<view class="result">
						<text v-if="objectRecognition != ''" v-html="objectRecognition"></text>
						<view v-else-if="rawMaterialIdentificationData.length != 0" class="table">
							<view
								v-for="(item, index) in rawMaterialIdentificationData" :key="index"
								class="rawMaterialIdentificationData">
								<view :style="{ color: item.color }">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view class="button">
						<button @click="back">返回</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				title: '食品安全移动监管',
				scanImg: '/static/img/scan.png',
				stepList: [{
					id: 1,
					step: '工作通知',
				}, {
					id: 2,
					step: '法律法规',
				}],
				selectedTabId: 1,
				objectRecognition: '',
				rawMaterialIdentificationData: [],
				classValue: '',
				classDataTree:[],
				classFoodType: '',
				selectPictureNumber: 0,
				cameraPictureNumber: 0,
				popupShow: false,
				swiperList: [{
					imgPath: '/static/img/temporaryImgPath.jpg',
					noticeTitle: '两种保健食品原料备案产品剂型及技术要求发布'
				},
				{
					imgPath: '/static/img/temporaryImgPath.jpg',
					noticeTitle: '两种保健食品原料备案产品剂型及技术要求发布'
				}],
				noticeList: [],
				temporaryImgPath: '/static/img/temporaryImgPath.jpg'
			}
		},
		onLoad() {

		},
		created() {

		},
		mounted() {
			// const token = uni.getStorageSync(uni.$Call.token);
			// console.log('asd', token);
		},
		methods: {
			selectTab(tabId) {
				this.selectedTabId = tabId;
				this.listData(1,10)
			},
			async listData(pageNo, pageSize) {
				let data = {
					pageNum: pageNo,
					pageSize: pageSize,
					noticeType: this.selectedTabId
				}
				try {
					const res = await uni.$api.getNotice(data); 
					// this.swiperList = res.data.data.carouselList
					// console.log('this.swiperList', this.swiperList)
					
					let list = res.data.data.noticeList
					list.forEach(obj => {
						const timestamp = parseInt(obj.createTime);
						const date = new Date(timestamp);
						const year = date.getFullYear();
						const month = String(date.getMonth() + 1).padStart(2, '0');
						const day = String(date.getDate()).padStart(2, '0');
						const formattedDate = `${year}-${month}-${day}`;
						obj.createTime = formattedDate;
					});
					
					this.$refs.paging.completeByKey(list);
				}  catch (error) { 
					 this.$refs.paging.complete(false);
				}
			},
			noticeListActive(id) {
				uni.navigateTo({
					url: '/pages/index/indexActive?id=' + id
				})
			},
			scan() {
				this.$refs.scan.open('bottom')
			},
			// 物品识别
			itemIdentification() {
				this.$refs.identificationMethod.open('bottom')
				this.selectPictureNumber = 3
				this.cameraPictureNumber = 3
			},
			// 选择图片
			selectPicture(number) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						this.uploadImage(tempFilePaths[0], number)
						this.$refs.identificationMethod.close('bottom')
						this.$refs.scan.close('bottom')
						uni.showLoading({
							title: '加载中...',
							mask: true 
						});
					}
				})
			},
			// 拍照
			cameraPicture(number) {
				uni.chooseImage({
					sourceType: ['camera'],
					success: (res) => {
						this.uploadImage(res.tempFilePaths[0], number)
						this.$refs.identificationMethod.close('bottom')
						this.$refs.scan.close('bottom')
						uni.showLoading({
							title: '加载中...',
							mask: true 
						});
					}
				});
			},
			// 物品识别
			uploadImage(filePath, number) {
				if(number === 5) {
					var formData = {
						type: number,
						foodType: this.classFoodType
					}
				}else {
					var formData = {
						type: number
					}
				}
				console.log('number', number)
				console.log('formData', formData)
				uni.uploadFile({
					url: 'scan/getResult',
					filePath: filePath,
					name: 'file',
					formData: formData,
					header: {
						'content-Type': 'multipart/form-data',
					},
					success: (res) => {
						if(number === 5) {
							this.objectRecognition = ''
							const obj = JSON.parse(res.data);
							this.rawMaterialIdentificationData = obj.data.text
							// if(obj.data.text) {
							// 	obj.data.text.forEach(item => {
							// 		this.objectRecognition += item.text + "<br>";
							// 	});
							// }else {
							// 	uni.showToast({
							// 		title:'上传失败',
							// 		icon:'error'
							// 	})
							// }
						}else {
							this.objectRecognition = ''
							const obj = JSON.parse(res.data);
							this.objectRecognition = obj.data.text.replace(/\n/g, '<br>')
						}
						this.$refs.selectPicture.open('bottom')
						this.$refs.identificationMethod.close('bottom')
						this.$refs.scan.close('bottom')
						this.popupShow = false;
						this.$refs.rawMaterialIdentification.close('bottom')
						uni.hideLoading();
					},
					fail: ()=> {
						uni.hideLoading();
						uni.showToast({
							title:'图片选择错误',
							icon:'error'
						})
					}
				})
			},
			// 物品识别返回
			back() {
				this.$refs.selectPicture.close('bottom')
			},
			// 原料识别
			async rawMaterialIdentification() {
				try {
					const res = await uni.$api.getMaterialsTypeList(); 
					this.classDataTree = res.data.data
					this.popupShow = true;
					this.$refs.rawMaterialIdentification.open('bottom')
				}  catch (error) {
					console.error(error)
				}
			},
			// 原料识别列表事件触发
			foodTypeChange() {
				
			},
			onnodeclick(e) {
				// console.log('nodeclick', e);
				this.classFoodType = e.value
			},
			onchange(e) {
				// console.log('onchange', e.detail.value);
			},
			identify() {
				if(this.classFoodType != '') {
					this.selectPictureNumber = 5
					this.cameraPictureNumber = 5
					this.$refs.identificationMethod.open('bottom')
				}
			},
			handleChange({ show }) {
			      if (show) {
			        this.popupShow = true;
			      } else {
			        this.popupShow = false;
			      }
			    }
		},
		watch: {
			
		},
	}
</script>

<style lang="scss">
	.indexContent {
		background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F7 100%);
		background-size: cover;
		padding: 68rpx 3%;
		height: calc(100vh - 136rpx);
		
		&.popupShow {
			overflow: hidden;
			position: fixed;
		}

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			background: #fff;

			.title {
				display: flex;
				justify-content: space-between;
				width: calc(100% - 6%);
				margin: 84rpx auto 24rpx;

				.logo {
					width: 340rpx;
					height: 42rpx;
				}

				.scan {
					width: 38rpx;
					height: 38rpx;
				}
			}

			.step {
				display: flex;
				justify-content: space-around;
				height: 80rpx;
				line-height: 80rpx;
				background: #fff;

				view {
					position: relative;
					font-size: 30rpx;
					font-family: YouSheBiaoTiHei;
					color: #4C7ED4;
					letter-spacing: 2px;

					&.active {
						color: #004CA3;

						&::before {
							display: block;
							content: "";
							position: absolute;
							left: 50%;
							bottom: 0%;
							transform: translate(-50%, 0%);
							width: 31rpx;
							height: 4rpx;
							background: #004DA4;
							border-radius: 7rpx;
						}
					}
				}
			}
		}

		.centre {
			margin: 180rpx 0 0 0;
			padding: 0 17.5rpx 30rpx 17.5rpx;
			
			.z-paging-content-fixed {
				margin: 550rpx 0 0 0;
				padding: 0 5%;
			}

			.banner {
				position: relative;

				.swiper-container {
					width: 100%;
					height: 286rpx;
					border-radius: 11rpx;
					overflow: hidden;
					box-shadow: 0rpx 9rpx 24rpx 0rpx rgba(0, 0, 0, 0.3);

					.swiper-image {
						width: 100%;
						height: 100%;
					}

					.swiper-text {
						position: absolute;
						bottom: 14rpx;
						left: 34rpx;
						width: 100%;
						text-align: left;
						font-size: 21rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFF;
					}

					/deep/.uni-swiper-dots-horizontal {
						left: initial;
						right: 0;
						bottom: 25rpx;

						.uni-swiper-dot {
							background: #fff;
							opacity: .6;
							width: 6rpx;
							height: 6rpx;
							margin-right: 8rpx;
						}

						.uni-swiper-dot-active {
							width: 26rpx;
							height: 6rpx;
							border-radius: 20rpx;
							opacity: 1;
						}
					}
				}

				.hot {
					width: 81rpx;
					height: 35rpx;
					line-height: 35rpx;
					text-align: center;
					background: linear-gradient(180deg, #FF1E31 0%, #FF6E7B 100%);
					border-radius: 11rpx 0rpx 11rpx 0rpx;
					font-size: 20rpx;
					font-family: YouSheBiaoTiHei;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.ul {
				background: #FFFFFF;
				box-shadow: 0rpx 9rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 18rpx;
				margin: 25rpx auto 0;
				padding: 36rpx;

				.li {
					display: flex;
					justify-content: flex-start;
					border-bottom: 1rpx solid #B6B6B6;
					;
					padding: 0 0 27rpx 0;

					.left {
						margin: 0 18rpx 0 0;

						image {
							width: 164rpx;
							height: 109rpx;
							border-radius: 10rpx;
						}
					}

					.right {

						.h1 {
							font-size: 25rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.h2 {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin: 10rpx auto 0;
						}
					}

					&+.li {
						margin: 27rpx auto 0;
					}

					&:last-child {
						border: none;
						padding: 0;
					}
				}
			}
		}

		.scanContent,
		.itemIdentificationContent,
		.identificationMethodContent,
		.selectPictureContent,
		.rawMaterialIdentificationContent {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;

			.title {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background: url('../../static/img/popupTitle.png') no-repeat center center;
				background-size: cover;
				font-size: 25rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				// text-indent: 45rpx;
				text-align: center;
			}

			.box {

				.button {
					margin: 58rpx auto 0;
					padding: 0 95rpx 24rpx 95rpx;
					display: flex;

					button {
						width: 269rpx;
						height: 55rpx;
						line-height: 55rpx;
						background: #0552A9;
						border-radius: 10rpx;
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #fff;

						// 		&.itemIdentification {
						// 			color: #fff;
						// 		}

						// 		&.rawMaterialIdentification {
						// 			background: none;
						// 			border: 1rpx solid #979797;
						// 			color: #979797;
						// 		}
					}
				}
			}
		}

		.selectPictureContent {

			.box {

				.result {
					// height: 50vh;
					overflow-x: hidden;
					padding: 20rpx 40rpx 0 40rpx;
					
					.table {
						overflow-x: hidden;
						display: flex;
						flex-wrap: wrap;
						border-top: 2rpx solid #979797;
						border-left: 2rpx solid #979797;
						
						.rawMaterialIdentificationData {
							display: flex;
							flex-direction: column;
							width: 50%;
							
							view {
								border-right: 2rpx solid #979797;
								border-bottom: 2rpx solid #979797;
								color: rgb(191, 81, 0);
								padding: 0 15rpx;
								width: calc(100% - 34rpx);
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}

				.button {
					margin: 18rpx auto 0;
					padding: 0 0 24rpx 0;

					button {
						width: 90%;
					}
				}
			}
		}
		
		.rawMaterialIdentificationContent {
			
			/deep/.uni-data-tree-dialog {
				position: relative;
			}
			
			.box {
				
				.uni-data-tree {
					width: 90%;
					margin: 20rpx auto;
					padding: 10rpx 0;
					
					.uni-data-tree-input {
						
						.input-value.input-value-border {
							
							.selected-area {
								font-size: 24rpx;
							}
						}
					}
				}
			
				.button {
					margin: 18rpx auto 0;
					padding: 0 0 24rpx 0;
			
					button {
						width: 90%;
					}
				}
			}
		}
	}
</style>